<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="注册common.css">
  <link rel="stylesheet" href="注册.css">
  <script src="../ajax/jquery-3.5.1.min.js"></script>
  <script src="../ajax/ajax.form.js"></script>
</head>

<body>
<div class="shortcut">
  <div class="wrapper">
    <i class="avatar"></i>
    <ul>
      <li><a href="登录login.html" id="top">您好！请先登录</a></li>
      <li><a href="注册导航.html">免费注册</a></li>
      <li><a href="index.html">主页</a></li>
      <li><a href="ShopCar.html">购物车</a></li>
      <li><a href="#">收货中心</a></li>
      <li><a href="homePage.html">个人中心</a></li>
      <li><a href="视觉介绍.html"><span></span>官网</a></li>
    </ul>
  </div>
</div>

<div class="xtx-wrapper">
  <div class="container">
    <!-- 卡片 -->
    <div class="xtx-card">
      <h3>新用户注册</h3>
      <form class="xtx-form" action="http://127.0.0.1:5000/regist" method="post">
        <div data-prop="username" class="xtx-form-item">
          <span class="iconfont icon-zhanghao"></span>
          <input name="username" type="text" placeholder="设置用户名">
          <span class="msg"></span>
        </div>
        <div data-prop="name" class="xtx-form-item">
          <span class="iconfont icon-zhanghao"></span>
          <input name="name" type="text" placeholder="设置昵称">
          <span class="msg"></span>
        </div>
        <div data-prop="phone" class="xtx-form-item">
          <span class="iconfont icon-shouji"></span>
          <input name="phone" type="text" placeholder="输入手机号码  ">
          <span class="msg"></span>
        </div>
        <div style="font-size: 18px;font-weight: bolder;color: #7c7c7c" class="gender">
          <label>性别：</label>
          <input type="radio" id="male" name="gender" value="1" required>
          <label htmlFor="male">男</label>
          <input type="radio" id="female" name="gender" value="2" required>
          <label htmlFor="female">女</label>
        </div>

        <div data-prop="code" class="xtx-form-item">
          <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
          <input name="code" type="text" placeholder="短信验证码">
          <span class="msg"></span>
          <a class="code" href="javascript:;">发送验证码</a>
        </div>
        <div data-prop="password" class="xtx-form-item">
          <span class="iconfont icon-suo"></span>
          <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
          <span class="msg"></span>
        </div>
        <div data-prop="confirm" class="xtx-form-item">
          <span class="iconfont icon-suo"></span>
          <input name="confirm" type="password" placeholder="请再次输入上面密码">
          <span class="msg"></span>
        </div>
        <div class="xtx-form-item pl50">
          <i class="iconfont icon-queren"></i>
          已阅读并同意<i>《用户服务协议》</i>
        </div>
        <div class="xtx-form-item">
          <button class="submit">下一步</button>
          <!-- <a class="submit" href="javascript:;">下一步</a> -->
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  (function () {
    // 1. 发送短信验证码模块
    const code = document.querySelector('.code')
    let flag = true  // 通过一个变量来控制   节流阀
    //  1.1 点击事件
    code.addEventListener('click', function () {
      if (flag) {
        // 取反了，不能马上第二次点击
        flag = false
        let i = 5
        // 点击完毕之后立马触发
        code.innerHTML = `0${i}秒后重新获取`
        // 开启定时器
        let timerId = setInterval(function () {
          i--
          code.innerHTML = `0${i}秒后重新获取`
          if (i === 0) {
            // 清除定时器
            clearInterval(timerId)
            // 从新获取
            code.innerHTML = `重新获取`
            // 到时间了，可以开启 flag了
            flag = true
          }
        }, 1000)
      }
    })
  })();


  // 2. 验证的是用户名
  // 2.1 获取用户名表单
  const username = document.querySelector('[name=username]')
  // 2.2 使用change事件  值发生变化的时候
  username.addEventListener('change', verifyName)
  // 2.3 封装verifyName函数
  function verifyName() {
    // console.log(11)
    const span = username.nextElementSibling
    // 2.4 定规则  用户名
    const reg = /^[a-zA-Z0-9-_]{6,10}$/
    if (!reg.test(username.value)) {
      // console.log(11)
      span.innerText = '输入不合法,请输入6~10位'
      return false
    }
    // 2.5 合法的 就清空span
    span.innerText = ''
    return true
  }
  const name=document.querySelector('[name=name]')
  name.addEventListener('change',verifyName1)
  function verifyName1(){
    const span=name.nextElementSibling
    if (!name.value){
      span.innerHTML='输入非空昵称'
      return false
    }
    span.innerHTML=''
    return true
  }



  // 3. 验证的是手机号
  // 2.1 获取手机表单
  const phone = document.querySelector('[name=phone]')
  // 2.2 使用change事件  值发生变化的时候
  phone.addEventListener('change', verifyPhone)
  // 2.3 verifyPhone
  function verifyPhone() {
    // console.log(11)
    const span = phone.nextElementSibling
    // 2.4 定规则  用户名
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    if (!reg.test(phone.value)) {
      // console.log(11)
      span.innerText = '输入不合法,请输入正确的11位手机号码'
      return false
    }
    // 2.5 合法的 就清空span
    span.innerText = ''
    return true
  }


  // 4. 验证的是验证码
  // 4.1 获取验证码表单
  const codeInput = document.querySelector('[name=code]')
  //4.2 使用change事件  值发生变化的时候
  codeInput.addEventListener('change', verifyCode)
  // 4.3 verifyPhone
  function verifyCode() {
    // console.log(11)
    const span = codeInput.nextElementSibling
    // 4.4 定规则  验证码
    const reg = /^\d{6}$/
    if (!reg.test(codeInput.value)) {
      // console.log(11)
      span.innerText = '输入不合法,6 位数字'
      return false
    }
    // 4.5 合法的 就清空span
    span.innerText = ''
    return true
  }

  // 5. 验证的是密码框
  // 5.1 获取密码表单
  const password = document.querySelector('[name=password]')
  //5.2 使用change事件  值发生变化的时候
  password.addEventListener('change', verifyPwd)
  // 5.3 verifyPhone
  function verifyPwd() {
    // console.log(11)
    const span = password.nextElementSibling
    // 5.4 定规则  密码
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (!reg.test(password.value)) {
      // console.log(11)
      span.innerText = '输入不合法,6~20位数字字母符号组成'
      return false
    }
    // 5.5 合法的 就清空span
    span.innerText = ''
    return true
  }



  // 6. 密码的再次验证
  // 6.1 获取再次验证表单
  const confirm = document.querySelector('[name=confirm]')
  //6.2 使用change事件  值发生变化的时候
  confirm.addEventListener('change', verifyConfirm)
  // 6.3 verifyPhone
  function verifyConfirm() {
    // console.log(11)
    const span = confirm.nextElementSibling
    // 6.4 当前表单的值不等于 密码框的值就是错误的
    if (confirm.value !== password.value) {
      // console.log(11)
      span.innerText = '两次密码输入不一致'
      return false
    }
    // 6.5 合法的 就清空span
    span.innerText = ''
    return true
  }
const btn=document.querySelectorAll('.gender input')
  for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener('change',verifyGender)
  }
  function verifyGender(){

  }
  // 7. 我同意
  // const queren = document.querySelector('.icon-queren')
  // queren.addEventListener('click', function () {
  //   // 切换类  原来有的就删掉，原来没有就添加
  //   this.classList.toggle('icon-queren2')
  // })

  // 8. 提交模块
  const form = document.querySelector('form')
  form.addEventListener('submit', function (e) {
    // 判断是否勾选我同意模块 ，如果有 icon-queren2说明就勾选了，否则没勾选
    // if (!queren.classList.contains('icon-queren2')) {
    //   alert('请勾选同意协议')
    //   // 阻止提交
    //   e.preventDefault()
    // }
    // 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
    // console.log(verifyName())
    if (!verifyName()) e.preventDefault()
    if (!verifyPhone()) e.preventDefault()
    if (!verifyCode()) e.preventDefault()
    if (!verifyPwd()) e.preventDefault()
    if (!verifyName1()) e.preventDefault()
    if (!verifyConfirm()) e.preventDefault()
  })
  $(function () {
    /*
     获取form元素，调用其ajaxForm(...)方法
     内部的function(data)的data就是后台返回的数据
    */
    $(".xtx-form").ajaxForm(function (data) {
      if (data==="false"){
        alert("账号或手机号已被使用")
      }
      else {
        if (data==="true"){
          alert('注册成功！')
          location.href='index.html'
        }
      }

            }
    );
  });
</script>
</body>

</html>